<template>
	<view class="com-card">
		<view class="head">{{title}}<slot name="btn"></slot></view>
		<slot name="cnt"></slot>
	</view>
</template>

<script>
	export default {
		name: 'card',
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		watch: {
			title(newVal) {
				if (uni.report && newVal !== '') {
					uni.report('title', newVal)
				}
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style scoped>
.com-card {
    margin-bottom: 24rpx;
    background: #fff;
    padding: 40rpx 0 20rpx;
}

.com-card .head {
    padding: 0rpx 32rpx 22rpx 45rpx;
    color: #222;
    font-size: 30rpx;
    line-height: 30rpx;
	font-weight: 700;
	position: relative;
}
.com-card .head::before{
	position: absolute;
	content: '';
	width: 8rpx;
	left: 22rpx;
	top: 0rpx;
	height: 30rpx;
	background: #499dff;
}

</style>
